<!--
* @author wn
* @date 2022/04/19 14:18:09
* @description: 底部组件
!-->
<template>
	<footer class="app-footer">
		<div class="container">
			<!-- 联系我们 -->
			<div class="contact">
				<dl>
					<dt>客户服务</dt>
					<dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
					<dd><i class="iconfont icon-question"></i> 问题反馈</dd>
				</dl>
				<dl>
					<dt>关注我们</dt>
					<dd><i class="iconfont icon-weixin"></i> 公众号</dd>
					<dd><i class="iconfont icon-weibo"></i> 微博</dd>
				</dl>
				<dl>
					<dt>下载APP</dt>
					<dd class="qrcode"><img src="@/assets/images/qrcode.jpg" /></dd>
					<dd class="download">
						<span>扫描二维码</span>
						<span>立马下载APP</span>
						<a href="javascript:;">下载页面</a>
					</dd>
				</dl>
				<dl>
					<dt>服务热线</dt>
					<dd class="hotline">
						<small>400-0000-000</small>
						<small>周一至周日 8:00-18:00</small>
					</dd>
				</dl>
			</div>
		</div>
		<!-- 底部 -->
		<div class="end-bg-color">
			<div class="container">
				<ul class="extra">
					<li>
						<a href="javascript:;">
							<i class="iconfont icon-footer01"></i>
							<span>价格亲民</span>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<i class="iconfont icon-footer02"></i>
							<span>物流快捷</span>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<i class="iconfont icon-footer03"></i>
							<span>品质新鲜</span>
						</a>
					</li>
				</ul>
				<!-- 版权信息 -->
				<xtx-copy-right />
			</div>
		</div>
	</footer>
</template>
<script>
export default {
	name: 'AppFooter',
}
</script>
<style scoped lang="less">
.app-footer {
	background-color: #fff;
	padding-top: 20px;
	.contact {
		display: flex;
		padding: 60px 0 40px 25px;
		dl {
			flex: 1;
			height: 190px;
			text-align: center;
			padding: 0 46px;
			border-right: 1px solid #f2f2f2;
			color: #999;
			&:last-child {
				border-right: none;
			}
			dt {
				font-size: 18px;
				line-height: 1;
			}
			dd {
				float: left;
				margin: 36px 12px 0 0;
				width: 92px;
				height: 92px;
				padding-top: 10px;
				border: 1px solid #ededed;
				.iconfont {
					display: block;
					font-size: 36px;
					color: #666;
				}
				&:hover {
					.iconfont {
						color: @xtxColor;
					}
				}
			}
			.qrcode {
				width: 92px;
				height: 92px;
				padding: 7px;
			}
			.download {
				padding-top: 5px;
				font-size: 14px;
				width: 92px;
				height: 92px;
				border: none;
				span {
					display: block;
				}
				a {
					display: block;
					line-height: 1;
					padding: 10px;
					margin-top: 6px;
					color: #fff;
					border-radius: 2px;
					background-color: @xtxColor;
				}
			}
			.hotline {
				width: 100%;
				height: auto;
				margin: 36px 0 0 0;
				padding-top: 20px;
				border: none;
				& :first-child {
					font-size: 22px;
					color: #666;
				}
				small {
					display: block;
					font-size: 15px;
					color: #999;
				}
			}
		}
	}
	// 底部
	.end-bg-color {
		background-color: #333;
	}
	.extra {
		display: flex;
		justify-content: space-around;
		height: 178px;
		padding: 60px 0;
		border-bottom: 1px solid #434343;
		a {
			height: 58px;
			line-height: 58px;
			color: #fff;
			font-size: 28px;
			i {
				font-size: 50px;
				vertical-align: middle;
				margin-right: 10px;
				font-weight: 100;
			}
			span {
				vertical-align: middle;
				text-shadow: 0 0 1px #333;
			}
		}
	}
}
</style>
